<header class="flex flex-row items-center justify-between mb-2">
  <h1 class="text-sm font-light m-0">
    Merge Profiles
  </h1>

  <svg role="img" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="w-3 h-3 text-secondary hover:text-primary cursor-pointer" (click)="dialogRef.close()">
    <path fill="currentColor" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"></path>
  </svg>
</header>

<span class="py-2 text-secondary text-xxs">
  Please select the primary profile. All other selected profiles will be merged into the primary profile by copying metadata, fingerprints and icons into a new profile.
  Only the settings of the primary profile will be kept.
</span>

<div class="flex flex-row gap-2 justify-between border-b border-gray-500 p-2 items-center">
  <label class="text-primary text-xxs relative">Primary Profile:</label>
  <sfng-select [(ngModel)]="primary" (ngModelChange)="newName = newName || primary?.Name || ''" class="border border-gray-500">
    <ng-container *ngFor="let p of profiles; trackBy: trackProfile">
      <sfng-select-item *sfngSelectValue="p; label:p.Name" class="flex flex-row items-center gap-2">
        <app-icon [profile]="p"></app-icon>
        {{ p.Name }}
      </sfng-select-item>
    </ng-container>
  </sfng-select>
</div>

<div class="flex flex-row gap-2 justify-between items-center p-2">
  <label class="text-primary text-xxs relative">Name for the new Profile</label>
  <input type="text" [(ngModel)]="newName" placeholder="New Profile Name" class="!border !border-gray-500 flex-grow">
</div>

<div class="flex flex-row justify-end gap-2">
  <button (click)="dialogRef.close()">Cancel</button>
  <button class="bg-blue text-white" (click)="mergeProfiles()" [disabled]="!primary || !newName">Merge</button>
</div>
